<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .news {
            width: 500px;
            height: 300px;
            margin: 50px auto;
        }

        .news h3 {
            line-height: 30px;
        }

        .news li {
            height: 32px;
            line-height: 32px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
</head>

<body>

    <div class="layui-container">
        <div class="news">
            <h3>新闻列表</h3>
            <hr>
            <ul id="list">

            </ul>
            <script type='text/html' id="temp1">
                {% for item in newslist %}
                <li><a href="{{item.href}}">{{item.name}}</a></li>
                {% endfor %}
            </script>
            <hr>
            <div id="test1"></div>
        </div>

    </div>



    <script src="layui/layui.all.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/nunjucks/3.0.1/nunjucks.min.js"></script>
    <script>
        var laypage = layui.laypage;
        var $ = layui.jquery;
        laypage.render({
            elem: 'test1',
            count: 32, // 数据总数，从服务端得到
            limit: 10,
            // layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
            jump: function (obj, first) {
                $.ajax({
                    type: "get",
                    url: "/getnews",
                    data: { curr: obj.curr, limit: obj.limit },
                    dataType: "json",
                    success: function (result) {
                        console.log(result);
                        nunjucks.configure({ autoescape: true });
                        let mylist = nunjucks.renderString($('#temp1').html(), { newslist: result });
                        $('#list').html(mylist);
                    }
                });
            }
        })
    </script>
</body>

</html>